<template>
    <div class="flow-info">

        <el-form label-position="left" label-width="100px" id="contentForm" enctype="multipart/form-data">
            <el-form-item v-show="false">
                <el-input v-model="detailData.id" name="id" readonly></el-input>
                <el-input v-model="detailData.nodeId" name="nodeId" readonly></el-input>
                <el-input v-model="detailData.preNodeId" name="preNodeId" readonly></el-input>
                <el-input v-model="detailData.mainId" name="mainId" readonly></el-input>
                <el-input v-model="detailData.rootNodeId" name="rootNodeId" readonly></el-input>
            </el-form-item>
            <el-form-item label="结点名">
                <el-input v-model="name" class="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="位置信息" class="hasMust">
                <el-input v-model="addressInfo" name="location" v-show="false"></el-input>
                <el-select v-model="addressInfo" placeholder="请输入位置信息" value="" >
                    <el-option
                        v-for="item in addressList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示类型" class="hasMust">
                <el-input v-model="addressInfo" name="type" v-show="false"></el-input>
                <el-select v-model="showType" placeholder="请输入显示类型">
                    <el-option
                        v-for="item in showTypeList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="背景图片">
                <el-upload
                    class="upload-demo"
                    action="/zuul/ibmserverapi/login/nodeRelation/upload/file"
                    :http-request="uploadImg"
                    multiple
                    :limit="1"
                    :before-upload="beforeUploadFile"
                    :file-list="fileList"
                    :data="detailData"
                    name="picfile"
                    @change="uploadImg"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">仅支持jpg/png/gif文件</div>
                </el-upload>
                <el-button @click="uploadUrlClickHandle" name="url" style="color:rgb(27, 155, 252);position: absolute;top: 0;left: 290px;">查看</el-button>
                <el-input v-model="uploadUrl" v-show="false" name="url"></el-input>
                <el-input :value="fileList.length>0?fileList[0].name:fileList" v-show="false" name="fileName"></el-input>

            </el-form-item>

            <el-form-item label="节点入口" v-if="nodeEntryIsShow">
                <el-button type="primary" @click="nodeEntryToggle" :icon="nodeEntryIsFlod==false?'el-icon-arrow-down':'el-icon-arrow-up'" style="float:left">{{nodeEntryIsFlod==false?"展开":"收起"}}</el-button>
            </el-form-item>
            <div v-show="nodeEntryIsFlod">
                <div v-for="(item,index1) in nodeEntrySameMethod" :key="item.question">
                    <el-form-item label="问题" v-if="nodeEntryIsFlod" class="nodeEntryShowInput">
                        <el-input :value="item.id" readonly :name="'questionFormList['+index1+'].id'" v-show="false"></el-input>
                        <el-input :value="item.mainId" readonly :name="'questionFormList['+index1+'].mainId'" v-show="false"></el-input>
                        <el-input :value="item.question" readonly :name="'questionFormList['+index1+'].question'"></el-input>
                    </el-form-item>
                    <div v-if="item.sentenceFormList.length>0">
                        <div v-for="(temp,index2) in item.sentenceFormList" :key="temp.id">
                            <el-form-item :label="index2==0?'相似问法':''" class="nodeEntryShowInput" >
                                <el-input :value="temp.sentenceId" :name="'questionFormList['+index1+'].sentenceFormList['+index2+'].sentenceId'" v-show="false"></el-input>
                                <el-input :value="temp.sentence" :name="'questionFormList['+index1+'].sentenceFormList['+index2+'].sentence'" readonly></el-input>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="相似问法" v-if="item.sentenceFormList.length==0" class="nodeEntryShowInput" style="text-align:left">
                        <span>暂无相似问法</span>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="显示文本" class="hasMust">
                <el-input v-model="showText" placeholder="请输入显示文本" name="showText"></el-input>
            </el-form-item>
            <el-form-item label="标准问">
                <el-input v-model="name" class="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="是否显示" class="hasMust">
                <el-radio v-model="showRadio" value="1" label="1" name="isShowText">是</el-radio>
                <el-radio v-model="showRadio" value="0" label="0" name="isShowText">否</el-radio>
            </el-form-item>
            <el-form-item label="附件">
                <el-col :span="8">
                    <p v-for="item in files" :key="item.id" class="files-item">{{item.name}}</p>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" >选择</el-button>
                </el-col>
            </el-form-item>

            <!-- 折叠面板 -->
            <el-collapse v-model="likeProblem">
                <el-collapse-item name="1">
                    <template slot="title">
                        <i class="header-icon el-icon-d-caret" style="color:#1B9BFC;font-weight:600px;">相似问法</i>
                    </template>
                    <el-form-item label-width="0" v-for="(item,index) in likeProblemList" :key="index">
                        <el-input :value="0" name="isRegular" v-show="false"></el-input>
                        <el-input v-model="item.sentenceId" name="sentenceId"  v-show="false"></el-input>
                        <el-input v-model="item.sentence" name="sentence" placeholder="请输入相似问法，不超过100个字"></el-input>
                        <el-input :value="item.isEntrance==true?1:0" name="isEntrance"  v-show="false"></el-input>
                        <el-checkbox v-model="item.isEntrance" title="是否入口" border>
                            <i class="el-icon-close" title="删除" @click="removeElFormItem(likeProblemList,index)"></i>
                        </el-checkbox>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addLikeProblem">添加相似问题</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="recommendLikeQuestion">推荐相似问法</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="bulkImport">批量导入</el-button>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <i class="header-icon el-icon-d-caret" style="color:#1B9BFC;font-weight:600px;">通配问法</i>
                    </template>
                    <el-form-item label-width="0" v-for="(item,index) in WildcardQuestionList" :key="index">
                        <el-input :value="2" name="isRegular" v-show="false"></el-input>
                        <el-input :value="item.sentenceId" name="sentenceId" v-show="false"></el-input>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="点击配置统配问法"
                            v-model="item.sentence"
                            readonly
                            @click.native="setWildcardQuestion(index,item.sentence)"
                            name="sentence"
                            class="bg-eee"
                        >
                        </el-input>
                        <el-input :value="item.isEntrance==true?1:0" name="isEntrance"  v-show="false"></el-input>
                        <el-checkbox v-model="item.isEntrance" title="是否入口" border>
                            <i class="el-icon-close" title="删除" @click="removeElFormItem(WildcardQuestionList,index)"></i>
                        </el-checkbox>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addWildcardQuestion">添加通配问法</el-button>
                </el-collapse-item>
            </el-collapse>


            <el-card class="box-card">
                <el-form-item label="答案类型" class="hasMust">
                    <el-input v-model="addressInfo" name="location" v-show="false"></el-input>
                    <el-select v-model="addressInfo" placeholder="请输入位置信息" value="" >
                        <el-option
                            v-for="item in addressList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="答案内容">
                    <el-input type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="适用终端">
                    <el-checkbox-group  style="text-align: left">
                        <el-checkbox label="标签1" name="type"></el-checkbox>
                        <el-checkbox label="标签2" name="type"></el-checkbox>
                        <el-checkbox label="标签3" name="type"></el-checkbox>
                        <el-checkbox label="标签4" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item  label-width="0" class="node-info-btn">
                    <el-button type="primary" >添加</el-button>
                    <el-button >删除</el-button>
                </el-form-item>
            </el-card>

            <el-form-item  label-width="0" class="node-info-btn">
                <div class="content-footer" >
                    <el-button @click="closeDialog('nodeDetailShow')">取消</el-button>
                    <el-button type="primary"  :disabled="isDelete">保存</el-button>
                </div>
            </el-form-item>
        </el-form>

        <!-- 导入相似问法模态框 -->
        <el-dialog title="导入相似问法" :visible.sync="dialogImportLikeQuestion" :modal="false" id="importLikeQuestionForm">
            <el-upload
                action="/ibmserverapi/login/nodeRelation/sentenceImport"
                :on-success="handleSuccess"
                :on-error="handleError"
                :before-upload="beforeImport"
                multiple
                :limit="3"
                :file-list="importLikeFileList"
                style="width:365px;margin-bottom:20px;"
                name="file"
            >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">Tip:仅支持excel文件，大小不超过5M！下载示例文件：<a href="/template/node_sentences.xlsx" style="color:#1B9BFC" id="download">相似问法模板</a></div>
            </el-upload>
            <div class="dialog-footer">
                <el-button type="primary">确认</el-button>
                <el-button @click="closeDialog('dialogImportLikeQuestion')">取消</el-button>
            </div>
        </el-dialog>
        <!-- 输入通配问法模态框 -->
        <el-dialog title="配置通配问法" :visible.sync="dialogWildcardQuestion" :modal="false">
            <el-form label-position="left" label-width="100px" ref=wildcardQuestionForm>
                <el-form-item label="表达式">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="例：我要取【】元"
                        v-model="wildcardQuestionExpression"
                    >
                    </el-input>
                </el-form-item>
                <div v-for="(item,index) in wildcardQuestionValueList" :key="index">
                    <el-form-item :label="item.keywordLabel">
                        <el-select v-model="item.keyword" size="mini" filterable value="">
                            <el-option
                                v-for="item in wildcardQuestionKeywordList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="item.variableLabel">
                        <el-input v-model="item.variable" placeholder="例：0,10000"  size="mini"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="通配问法">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="例：我要取【Num100(10000,20000)】元"
                        v-model="wildcardQuestionValue"
                        disabled="disabled"
                        class="bg-eee"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="检查语句">
                    <el-input
                        type="text"
                        placeholder="例：我要取15000元"
                        v-model="wildcardQuestionTest"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="匹配结果">
                    <p v-if="wildcardQuestionResult!==''" :class="wildcardQuestionResult=='结果正确'?'wildcardQuestionResultSuccess':'wildcardQuestionResultError'">{{wildcardQuestionResult}}</p>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirmEditWildcardQuestion">确认</el-button>
                <el-button type="success">检查</el-button>
                <el-button @click="closeDialog('dialogWildcardQuestion')">取消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: "flowInfo",
        props:{
            nodeData:{
                type:[Object,Array],
                default:[]
            }
        },
        components: {},
        data(){
            return {
                files:[
                    {id:1,name:"test1.png"},
                    {id:2,name:"test2.png"}
                ],
                detailData:{},//详情数据
                name:"HelloWorld",//详情名称.
                showType:1,//详情显示类型
                showTypeList:[{id: 1, label: '按钮'},{id: 3, label: '文本'}],//详情显示类型列表
                fileList:[],//详情背景图片上传列表
                nodeEntryIsShow:false,//点击的是否为根节点控制节点入口是否显示
                nodeEntryIsFlod:false,//节点入口是否展开
                nodeEntryProblem:"",//节点入口问题
                nodeEntrySameMethod:[
                    {
                        sentenceFormList:[]
                    },
                    {
                        sentenceFormList:[
                            {
                                label:"111",
                                value:"aaa",
                            },
                            {
                                label:"222",
                                value:"bbb",
                            },
                            {
                                label:"333",
                                value:"ccc",
                            }
                        ]
                    }
                ],//节点入口相似问法
                uploadUrl:"",//上传url
                showText:"我是显示文本",//详情显示文本
                showRadio:"1",//详情里面的是否显示
                likeProblem:[],//选择节点模态框里面的相似问题,
                likeProblemList:[//相似问题的值
                    {
                        sentence:"111",
                        isEntrance:true
                    },
                    {
                        sentence:"222",
                        isEntrance:false
                    }
                ],
                dialogImportLikeQuestion:false,//控制导入相似问法模态框
                importLikeFileList:[],//导入相似问法的文件列表
                WildcardQuestionList:[//通配问法列表
                    {
                        sentence:"",
                        isEntrance:true
                    }
                ],
                dialogWildcardQuestion:false,//控制通配问法模态框的值
                wildcardQuestionExpression:"",//通配问法表达式
                wildcardQuestionValueList:[],
                wildcardQuestionKeywordList:[//通配问法关键字
                    {id: 'Num100', label: 'Num100(整百)'},
                    {id: 'Num100?', label: 'Num100?(整百可选)'},
                    {id: 'NumNot100', label: 'NumNot100(非整百)'},
                    {id: 'NumNot100?', label: 'NumNot100?(非整百可选)'},
                    {id: 'Num', label: 'Num(任意范围)'},
                    {id: 'Num?', label: 'Num?(任意范围可选)'},
                    {id: 'Select', label: 'Select(任意值)'},
                    {id: 'Select?', label: 'Select?(任意值可选)'},
                    {id: 'Any', label: 'Any(占位)'},
                    {id: 'Any?', label: 'Any?(占位可选)'},
                ],
                wildcardQuestionKeyword:'Num100',//通配问法关键字的值
                wildcardQuestionVariable:"",//通配问法的变量值
                wildcardQuestionTest:"",//检查语句的值
                wildcardQuestionResult:"",//检查语句的结果
                nodeDetailShow:false,//控制详情页面的显示和隐藏
                editWildcardQuestionIndex:0,//当前编辑的通配问法的索引值
                isDelete:"",//当前编辑元素是否为删除元素,
                addressInfo:0,//详情位置信息
                addressList:[{id: 1, label: '底部'},{id: 2, label: '中部'},{id: 3, label: '左部'},{id: 4, label: '右部'},{id: 5, label: '右上角'}],//详情位置列表
            }
        },
        methods: {
            addLikeProblem(){//点击添加相似问题
                this.likeProblemList.push({
                    sentence:"",
                    sentenceId:0,
                    isEntrance:false
                })
            },
            nodeEntryToggle(){//节点入口切换
                this.nodeEntryIsFlod=!this.nodeEntryIsFlod;
            },
            recommendLikeQuestion(){//点击推荐相似问法
                showLoading();
                // hideLoading(); //隐藏加载框

            },
            confirmEditWildcardQuestion(){//确认输入通配问法
                let _confirmWildcardQuestionExpression=this.wildcardQuestionExpression;
                this.wildcardQuestionValueList.forEach(item=>{
                    let temp=this.getWildcardQuestionKeywordList(item.keyword);
                    temp=temp.split("(")[0]+"("+item.variable+")";
                    _confirmWildcardQuestionExpression=_confirmWildcardQuestionExpression.replace(/】/,`${temp}￥`)
                })
                _confirmWildcardQuestionExpression=_confirmWildcardQuestionExpression.replace(/￥/g,"】");
                this.WildcardQuestionList[this.editWildcardQuestionIndex].sentence=_confirmWildcardQuestionExpression;
                this.closeDialog("dialogWildcardQuestion");
            },
            bulkImport(){//点击批量导入
                this.dialogImportLikeQuestion=true;
            },
            setWildcardQuestion(index,val){//设置通配问法
                console.log(val)
                if (!val){
                    val=""
                }
                this.editWildcardQuestionIndex=index;
                this.dialogWildcardQuestion=true;
                this.wildcardQuestionResult="";
                this.wildcardQuestionExpression=val.split("【")[0];
                this.wildcardQuestionKeyword="Num100";
                this.wildcardQuestionVariable="";
                this.wildcardQuestionTest="";
                this.wildcardQuestionValueList=[];
                let _valLength=val.split("【").length;
                for(let i=0;i<_valLength;i++){
                    this.wildcardQuestionExpression+="【】"+val.split("【")[1].split("】")[1];
                    this.wildcardQuestionValueList.push({
                        keyword:val.split("【")[1].split("(")[0],
                        keywordLabel:"关键字"+(i+1),
                        variable:val.split("【")[1].split("(")[1].split(")")[0],
                        variableLabel:"变量"+(i+1)
                    })
                    val=val.replace(/【/,"");
                    val=val.replace(/】/,"");
                }

                this.resetForm('wildcardQuestionForm')
            },

            closeDialog(dialogName){//关闭模态框
                this[dialogName]=false;
            },
            beforeUploadFile(file, fileList){
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';

                if (!isJPG && !isGIF && !isPNG) {
                    this.$message.error('背景图片仅支持png,gif,jpg文件!');
                }

                return isJPG||isGIF||isPNG
            },
            beforeImport(file, fileList){
                console.log(file)
                var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
                const extension = testmsg === 'xls'
                const extension2 = testmsg === 'xlsx'
                const isLt5M = file.size / 1024 / 1024 < 5

                if (!extension && !extension2 ) {
                    this.$message.error('仅支持excel文件！');
                }

                if(!isLt5M) {
                    this.$message({
                        message: '上传文件大小不能超过 5MB!',
                        type: 'warning'
                    });
                }
                return extension||extension2&&isLt5M
            },
            uploadImg (f,fileList) {
                let formData=new FormData($("#contentForm")[0]);
                formData.append("fileName",f.file.name);
                formData.set("picfile",f.file);
                formData.set("preNodeId","");
                formData.set("mainId",52039);

                axios.post(f.action,formData)//上传图片
                    .then(data=>{
                        this.$message.success("图片上传成功");
                        this.uploadUrl=data.data.model.url;
                        this.fileList=[
                            {
                                url:data.data.model.url,
                                name:data.data.model.fileName
                            }
                        ]
                        this.$nextTick(()=>{
                            $(".el-upload-list__item-name").attr("href",data.data.model.url);
                            $(".el-upload-list__item-name").attr("target","_blank");
                        })
                    })
                    .catch(({err}) => {
                        this.$message.error("图片上传失败")
                    })
            },

            uploadUrlClickHandle(){
                if(!this.valIsEmpty(this.uploadUrl)){
                    window.open(this.uploadUrl);
                }else{
                    this.$message("暂时没有上传背景图片哦！");
                }
            },
            getWildcardQuestionKeywordList(val){
                let returnVal="";
                this.wildcardQuestionKeywordList.forEach(item=>{
                    if(item.id==val){
                        returnVal=item.label.split("(")[0]+"()"
                    }
                })
                return returnVal
            },
            handleSuccess(){
                this.$message.success("导入成功");
            },

            handleError(file, fileList){//上传图片成功
                this.$message.error("导入失败");
            },
            resetForm(value){//重置表单
                this.$nextTick(()=>{
                    this.$refs[value].resetFields()
                })
            },
            removeElFormItem(list,index){//删除相似问题或者通配问法
                list.splice(index,1)
            },
            addWildcardQuestion(){//点击添加通配问法
                this.WildcardQuestionList.push({
                    sentence:"",
                    sentenceId:0,
                    isEntrance:false
                })
            },
        },
        computed: {
            wildcardQuestionValue(){//计算通配问法的值
                let _wildcardQuestionExpression = this.wildcardQuestionExpression;
                this.wildcardQuestionValueList.forEach((item, index)=> {
                    _wildcardQuestionExpression = _wildcardQuestionExpression.replace(/【】/, `${item.keyword}[${item.variable}]`)
                })
                return _wildcardQuestionExpression
            },
        },
        watch: {
            wildcardQuestionExpression(){//监听通配问法表达式，当出现'【】'时将关键字1和变量1显示出来
                //this.wildcardQuestionValueList=[];
                for(let i=this.wildcardQuestionValueList.length+1;i<this.wildcardQuestionExpression.split("【】").length;i++){
                    this.wildcardQuestionValueList.push({
                        keywordLabel:"关键字"+i,
                        keyword:'Num100',
                        variableLabel:"变量"+i,
                        variable:'',
                    })
                }
            }
        },
    }
</script>
<style scoped="scoped">
    .node-info-btn{
        text-align: left;
        padding-top:30px;
    }
    .content-footer{
        display:inline-block;
        margin-top:10px;
    }
    .files-item{
        height: 30px;
        line-height: 30px;
        margin-bottom:0;
        text-align:left;
    }
    .box-card{
        position: relative;
        width: 80%;
        margin-top:20px;
        margin-left:10px;
    }
</style>
